<template>
	<view class="container">
		<view class="good">
			<view class="goodImg">
				<image :src="orderInfo.imgurl"></image>
			</view>
			<view class="goodInfo">
				<view class="title">{{ orderInfo.goods_title }}</view>
				<view style="margin-top: 30rpx; line-height: 1.5rem;">
					<view style="overflow: hidden; text-overflow: ellipsis;">
						套餐：{{ orderInfo.setmeal_title }}
					</view>
					<view>租期：{{ orderInfo.lease_term }}</view>
					<view>销售价格：<span>￥{{ orderInfo.setmeal_price }}</span></view>
				</view>
			</view>
		</view>
		<view class="price">
			<view class="top flex">
				<view>
					<span>买断尾款</span>
					<image src="@/static/images/doubt.png"></image>
				</view>
				<view style="color: rgb(199, 69, 79);">
					￥{{ orderInfo.buyout_breach === 0.00 ? orderInfo.setmeal_price2 : orderInfo.buyout_amount }}</view>
			</view>

			<view class="bottom">
				<view class="flex">
					<view>销售价格</view>
					<view style="color: #999;">￥{{ orderInfo.setmeal_price }}</view>
				</view>
				<view class="flex">
					<view>实付租金</view>
					<view style="color: #999;">￥{{ orderInfo.paid_total_rent }}(共{{ orderInfo.paid_count }}期)
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<view class="pay-top">
				<label class="radio">
					<radio @click="check" value="同意" :checked="checked" />我已阅读并同意<span
						@click.stop="toAgreement">《租赁服务协议及相关》</span>
				</label>
			</view>
			<view class="pay-bottom">
				<view>实付买断<span>￥{{ orderInfo.buyout_amount_pay }}</span></view>
				<view>
					<button @click="buy">支付尾款</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {},
				id: null,
				checked: false
			}
		},
		onLoad(options) {
			this.id = options.order_id
			this.getOrderInfo()
		},
		methods: {
			check(e) {
				this.checked = !this.checked
			},
			toAgreement() {
				uni.navigateTo({
					url: '/pagesA/my/agreement/agreement'
				})
			},
			buy() {
				if (this.checked === false) return uni.$showMsg("请先勾选我已阅读")
				// 勾选后点击购买
			},
			async getOrderInfo() {
				const {
					data: res
				} = await uni.$http.get(`/Wechat/Order/getOrderBuyoutData?order_id=${ this.id }`)
				this.orderInfo = res.data
				this.orderInfo.imgurl = getApp().globalData.baseImg + this.orderInfo.imgurl
				console.log(res)
			}
		}
	}
</script>

<style scoped>
	.container {
		padding: 0 30rpx;
		font-size: 30rpx;
	}

	.good,
	.price {
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.good {
		display: flex;
		padding: 20rpx;
		font-size: 25rpx;
	}

	.price {
		padding: 20rpx 25rpx;
	}

	.goodImg image {
		width: 200rpx;
		height: 200rpx;
	}

	.goodInfo .title {
		color: black;
	}

	.goodInfo view {
		color: rgb(152, 152, 152);
	}

	.goodInfo span {
		color: rgb(199, 69, 79);
	}

	.top image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.bottom {
		background-color: #eeeeee;
		line-height: 2rem;
		border-radius: 20rpx;
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
	}

	.flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pay {
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 20rpx 30rpx 30rpx;
	}

	.pay-top span {
		color: #309bff;
	}

	.pay-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pay-bottom span {
		color: #ff0000;
	}

	.pay-bottom button {
		font-size: 30rpx;
		color: #fff;
		background-color: #ff0000;
		border-radius: 40rpx;
		margin-right: 50rpx;
	}
</style>